<template>
  <div class="dept-form-modal">
    <a-modal
      :open="open"
      :title="formTitle"
      :confirm-loading="loading"
      :ok-text="$t('common.submit')"
      :cancel-text="$t('common.cancel')"
      @ok="handleSubmit"
      @cancel="updateOpen(false)"
    >
      <a-form
        ref="formRef"
        :model="form"
        :rules="rules"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 16 }"
      >
        <a-form-item name="parentId" :label="$t('dept.parentDept')">
          <a-tree-select
            v-model:value="form.parentId"
            :tree-data="deptTree"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            :fieldNames="{ label: 'name', value: 'id', children: 'children' }"
            :placeholder="$t('dept.selectParent')"
            tree-default-expand-all
            allow-clear
          />
        </a-form-item>
        <a-form-item name="name" :label="$t('dept.name')">
          <a-input v-model:value="form.name" :placeholder="$t('dept.namePlaceholder')" />
        </a-form-item>
        <a-form-item name="leader" :label="$t('dept.leader')">
          <a-input v-model:value="form.leader" :placeholder="$t('dept.leaderPlaceholder')" />
        </a-form-item>
        <a-form-item name="phone" :label="$t('dept.phone')">
          <a-input v-model:value="form.phone" :placeholder="$t('dept.phonePlaceholder')" />
        </a-form-item>
        <a-form-item name="email" :label="$t('dept.email')">
          <a-input v-model:value="form.email" :placeholder="$t('dept.emailPlaceholder')" />
        </a-form-item>
        <a-form-item name="orderNum" :label="$t('dept.orderNum')">
          <a-input-number
            v-model:value="form.orderNum"
            :min="0"
            :max="999"
            style="width: 100%"
          />
        </a-form-item>
        <a-form-item name="status" :label="$t('dept.status')">
          <a-radio-group v-model:value="form.status">
            <a-radio :value="1">{{ $t('common.enabled') }}</a-radio>
            <a-radio :value="0">{{ $t('common.disabled') }}</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref, watch } from 'vue'
import type { FormInstance } from 'ant-design-vue'
import type { Rule } from 'ant-design-vue/es/form'
import type { CreateDept, ExtendedDept } from '@/types/api/system/dept'

defineOptions({
  name: 'DeptFormModal'
})

// 类型定义
type FormMode = 'add' | 'edit'

// Props定义
const props = withDefaults(defineProps<{
  open: boolean
  loading?: boolean
  formMode: FormMode
  form: CreateDept
  deptTree: ExtendedDept[]
}>(), {
  loading: false,
  deptTree: () => []
})

// Emits定义
const emit = defineEmits<{
  (e: 'update:open', value: boolean): void
  (e: 'submit'): void
}>()

// 国际化
const { t } = useI18n()

// 表单实例
const formRef = ref<FormInstance>()

// 更新open状态
const updateOpen = (value: boolean) => {
  emit('update:open', value)
}

// 表单标题
const formTitle = computed(() => {
  return props.formMode === 'add' ? t('dept.add') : t('dept.edit')
})

// 表单验证规则
const rules: Record<string, Rule[]> = {
  name: [
    { required: true, message: t('dept.nameRequired'), trigger: 'blur' }
  ],
  orderNum: [
    { required: true, message: t('dept.orderNumRequired'), trigger: 'blur' }
  ]
}

// 提交表单
const handleSubmit = async () => {
  try {
    await formRef.value?.validate()
    emit('submit')
  } catch (error) {
    console.error('表单验证失败:', error)
  }
}

// 监听可见性变化，重置表单验证状态
watch(() => props.open, (val) => {
  if (!val) {
    formRef.value?.resetFields()
  }
})

// 导出表单实例
defineExpose({
  formRef
})
</script>

<style lang="less" scoped>
.dept-form-modal {
  :deep(.ant-form-item) {
    margin-bottom: 16px;
  }
}
</style> 